<template>
  <div class="content">
    <div class="row">
      <el-form :inline="true">
        <el-form-item label="状态">
          <el-select v-model="detailed">
            <el-option
              v-for="item in options"
              :key="item"
              :value="item"
              :label="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="运营中心ID">
          <el-input v-model="id"></el-input>
        </el-form-item>
        <el-form-item label="申请时间">
          <DatePicker v-model="queryTime" :timevalue1="queryTime"></DatePicker>
        </el-form-item>
        <br />
        <el-form-item label="打款时间">
          <DatePicker
            v-model="queryTime1"
            :timevalue1="queryTime1"
          ></DatePicker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getData">查询</el-button>
        </el-form-item>
      </el-form>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            v-hasPermi="['ds:productOrder:export']"
            >导出</el-button
          >
        </el-col>
      </el-row>
    </div>

    <el-table :data="withdrawalList" border>
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="uid" label="运营中心ID">
        <template slot-scope="scope">
          <el-link type="primary" @click="checkUser(scope.row.uid)">
            {{ scope.row.uid }}
            <i class="el-icon-view el-icon--right"></i>
          </el-link>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="类型"></el-table-column>
      <el-table-column prop="remark" label="备注"></el-table-column>
      <el-table-column prop="amount" label="金额"></el-table-column>
      <el-table-column prop="balance" label="余额"></el-table-column>
      <el-table-column prop="createTime" label="提交时间"></el-table-column>
      <el-table-column prop="updateTime" label="打款时间"></el-table-column>
      <el-table-column prop="name" label="区域"></el-table-column>
      <el-table-column prop="detailed" label="详细信息"></el-table-column>
      <el-table-column prop="searchValue" label="银行"></el-table-column>
      <el-table-column prop="updateBy" label="卡号"></el-table-column>
      <el-table-column prop="createBy" label="名称"></el-table-column>
      <el-table-column
        prop="status"
        width="220"
        label="操作"
        v-if="detailed == '运营中心申请提现'"
      >
        <template slot-scope="scope">
          <el-button type="primary" @click="pass(scope.row)">通过</el-button>
          <el-button type="danger" @click="refuse(scope.row)">拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="prev, pager, next"
      :total="withdrawalListTotal"
      :page-size="10"
      :current-page="withdrawalPageNum"
      @current-change="handlewithdrawalPageChange"
    >
    </el-pagination>
  </div>
</template>
<script>
import {
  achievementRecordList,
  reviewSecondWithdrawal,
  coreList,
  coreQuery,
  exportAchievement,
} from "@/api/ds/operation";
import DatePicker from "@/components/DatePicker";
import { getUser } from "@/api/ds/user";
export default {
  components: {
    DatePicker,
  },
  props: {},
  data() {
    return {
      withdrawalList: [],
      withdrawalListTotal: 0,
      withdrawalPageNum: 1,
      detailed: "运营中心申请提现",
      options: ["运营中心申请提现", "运营中心提现成功", "运营中心提现失败"],
      id: null,
      queryTime: [],
      queryTime1: null,
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getData();
  },
  methods: {
    async checkUser(uid) {
      let res = await coreQuery({ id: uid });
      if (res.code === 200) {
        let uid1 = res.data.uid;

        let res1 = await getUser(uid1);
        if (res1.code === 200) {
          let user = res1.data;
          this.$alert(
            `<p>ID:${user.uid} </p>
          <p>手机号:${user.phone} </p>
          <p>用户名:${user.userName} </p>
          `,
            "用户信息",
            {
              confirmButtonText: "确定",
              dangerouslyUseHTMLString: true,
            }
          );
        }
      }
    },
    // 添加日期范围
    // addDateRange1(params, dateRange, propName) {
    //   var search = params;
    //   search.params = {};
    //   if (null != dateRange && "" != dateRange) {
    //     if (typeof propName === "undefined") {
    //       search.params["beginTime"] = dateRange[0];
    //       search.params["endTime"] = dateRange[1];
    //     } else {
    //       search.params["updateBegin" + propName] = dateRange[0];
    //       search.params["updateEnd" + propName] = dateRange[1];
    //     }
    //   }
    //   return search;
    // },

    async getData() {
      let params = {
        pageNum: this.withdrawalPageNum,
        pageSize: 10,
        detailed: this.detailed,
      };

      // 解析参数
      params = this.addDateRange(params, this.queryTime, "");
      if (this.queryTime1) {
        params.params["updateBegin"] = this.queryTime1[0];
        params.params["updateEnd"] = this.queryTime1[1];
      }

      if (this.id) {
        params.uid = this.id;
      }

      let res = await achievementRecordList(params);
      if (res.code === 200) {
        this.withdrawalList = res.rows;
        this.withdrawalListShow = true;
        this.withdrawalListTotal = res.total;
        this.$forceUpdate();
      }
    },

    handlewithdrawalPageChange(val) {
      this.withdrawalPageNum = val;
      this.getData();
    },

    /** 导出按钮操作 */
    handleExport() {
      let detailed = this.detailed;
      this.$confirm("是否确认导出所有订单数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return exportAchievement({ detailed });
        })
        .then((response) => {
          this.download(response.msg);
        });
    },

    async pass(row) {
      this.$confirm("此操作将打款, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await reviewSecondWithdrawal({ recordId: row.id, type: 1 });
          if (res.code === 200) {
            this.$notify({
              title: "成功",
              message: res.msg,
              type: "success",
            });

            this.getData();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    async refuse(row) {
      this.$prompt("请输入拒绝备注", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(async ({ value }) => {
          let res = await reviewSecondWithdrawal({
            recordId: row.id,
            type: 2,
            remarks: value,
          });

          if (res.code === 200) {
            this.$notify({
              title: "成功",
              message: res.msg,
              type: "success",
            });

            this.getData();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
  },
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
  deactivated() {},
};
</script>
<style lang="scss" scoped>
.content {
  padding: 20px;
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-end;

  .row {
    width: 100%;
  }
}
</style>
